<template>
<div>
  <div>{{user.name}}</div>
  <div>{{name}}</div>
  <div>{{user.fullName}}</div>
</div>
</template>

<script lang = "ts" setup>
import { computed } from 'vue-demi'
import { userStore } from '../store/user'
import { storeToRefs } from 'pinia'


const user = userStore()

// const name = computed(() => user.name)

const { name } = storeToRefs(user) // 直接解构会导致数据失去响应式，可以使用pinia的storeToReds来变成响应式

// user.name = '启明'  // 不建议这样修改仓库，让仓库自己改
user.updateName('启明')
</script>

<style>

</style>